<template>
  <div class="browsing-history">
    <menu-content-layout title="浏览历史">
      <template v-slot:icon>
        <img src="~/assets/images/browsing-history.png" alt="">
      </template>
      <template v-slot:content>
        <div class="select-wrap">
          请选择浏览日期：
          <m-date-picker v-model="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  width="200" @change="changeDate" style="display: inline-block;" placeholder="开始日期" />
        </div>
        <div class="prompt">
          *您可以查看过往7个日期的浏览历史。
        </div>
        <div class="list">
          <div class="item cursor" v-for="(item, index) in list" :key="index" @click="handleDetail(item.product.product_id)">
            <img class="pic" :src="item.product && item.product.image || noPic" alt="">
            <div class="infos">
              <div class="top">
                <div class="name">{{ item.product && item.product.store_name }}</div>
                <div class="company">{{ item.content }}</div>
              </div>
              <div class="bottom">
                <div class="price">￥{{ item.product && item.product.price }}</div>
                <div class="btns">
                  <img class="collect" v-if="item.product.is_show == 0" @click="collect(item)" src="~/assets/images/collect-grey.png" alt="">
                  <img class="collect" v-else @click="collect(item)" width="21px" height="19px" src="~/assets/images/collectA.png" alt="">
                  <img class="cart" @click="handleCart(item)" src="~/assets/images/cart-grey.png" alt="">
                </div>
              </div>
            </div>
          </div>
          <nodata message="暂无浏览记录" :status="listStatus"></nodata>
        </div>
        <m-pagination :pagination="total" :page-size="limit" @changePage='changeThisPage'/>
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MenuContentLayout from '@/components/common/menu-content-layout/MenuContentLayout'
import MSelect from '@/components/common/m-select/MSelect'
import MPagination from '@/components/common/m-pagination/MPagination'
import MDatePicker from '@/components/common/m-date-picker/MDatePicker'
import { myHistory, collectPro, addCart } from '@/request/api'

export default {
  name: 'BrowsingHistory',
  components: { MPagination, MSelect, MenuContentLayout, MDatePicker },
  data() {
    return {
      date: '',
      list: [],
      page: 1,
      listStatus: 1,
      total: 1,
      limit: 6,
      noPic: require('assets/images/nopic.jpg')
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // this.listStatus = 1
      let data = {
        page: this.page,
        limit: this.limit,
        date: this.date
      }
      myHistory(data).then(res => {
        this.list = res.data.list
        this.total = res.data.count
        if (res.data.count || this.list.length) {
          this.listStatus = 2
        } else {
          this.listStatus = 0
        }
      }).catch(err => {
        this.listStatus = 0
        this.$message.error(err.message)
      })
    },
    changeDate() {
      this.getList()
    },
    changeThisPage(page) {
      this.page = page
      this.getList()
    },
    collect(item) {
      const id = item.product.product_id && item.product.product_id
      const params = {
        type_id: id,
        type: 1
      }
      collectPro(params).then(res => {
        if(res.status === 200) {
          this.$toastVant.success(res.message)
          this.getList()
        }
      }).catch(err => {
        this.$toastVant.fail(err.message)
      })
    },
    handleCart(item) {
      const id = item.product.product_id && item.product.product_id
      const params = {
        cart_num : 1,
        is_new: 0,
        product_id: id,
        product_type: 0
      }
      addCart(params).then(res => {
        if(res.status === 200) {
          this.$toastVant.success(res.message)
          this.getList()
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    handleDetail(id) {
      this.$router.push('/category/product/'+id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.browsing-history {
  .select-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .prompt {
    color: $theme-color-1;
    margin-bottom: 30px;
  }

  .list {
    .item {
      width: 48.26%;
      height: 190px;
      border: solid 1px #eaeaea;
      margin: 0 7px 14px;
      padding: 15px;
      display: inline-flex;
      justify-content: space-between;

      .pic {
        width: 160px;
        height: 100%;
      }

      .infos {
        width: calc(100% - 170px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top {
          .name {
            font-size: 16px;
            height: 50px;
            @include text-omitted(2);
            margin-bottom: 20px;
          }

          .company {
            font-size: 14px;
          }
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .price {
            font-size: 20px;
            color: $theme-color-1;
            font-weight: bold;
          }

          .btns {
            .collect {
              margin-right: 15px;
              cursor: pointer;
            }
            .cart {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
